<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style type="text/css">
			
		</style>
		
		<div class="box">
			<video src="../../voice/MarBlue.mp3"></video>
			<div class="control">
				<a class="left icon-play"></a>
				<div class="progress">
					<div class="current"></div>
				</div>
				<a class="right icon-fullscreen"></a>
			</div>
		</div>
		
		
		
		<script type="text/javascript">
			var video = document.querySelector("video")//querySelector()方法返回文档中匹配指定 CSS选择器 中的一个元素;
			//如果需要返回所有的元素,则请使用querySelectorAll();
			//HTML5新引入的API,主流浏览器都支持
			
			//1.点击暂停播放按钮的操作
			document.querySelector(".left").onclick = function(){
				//判断当前是处于暂停还是播放状态,如果是暂停状态,就播放,如果是播放状态,就暂停
				if(video.paused){//
					video.paly();
					this.classList.add("icon-pause");
					this.classList.remove("icon-play");
				}else{
					video.pause();
					this.classList.remove("icon-pause");
					this.classList.add("icon-play");
				}
			};
			
			//2.更新进度条(动态的设置进度条的div宽度)
			//拿到视频的总长度,再拿到当前的播放的时间,求一个百分比,再把这个百分比设为css的width的值
			//当视频播放,视频的进度更新时,就会调用
			video.ontimeupdate = function(){
				var percent = video.currentTime / video.duration * 100 + "%";
				document.querySelector(".current").style.width = percent;
			}
			
			//3.点击进度条,更新进度
			document.querySelector(".progress").onclick = function(target){
				//拿到进度条的宽度
				var width = this.offsetWidth;
				//拿取当前点击位置的x坐标
				var x = target.offsetX;
				//比如说我的视频的总长度是60分钟,当前的时间 60 * x/width
				video.currentTime = x / width * video.duration;
			}
			
			//4.全屏播放功能的实现
			document.querySelector(".right").onclick = function(){
				//进入全屏
				video.webkitRequestFullScreen();
			}
		</script>
	</body>
</html>